﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta content="" name="description"/>
    <meta content="webthemez" name="author"/>
    <title>地图展示</title>
    <jsp:include page="../part/manager.css.jsp"></jsp:include>
</head>
<body>
<div id="wrapper">
    <!--头部：页面标题栏-->
    <jsp:include page="../part/manager.header.jsp"></jsp:include>
    <!--导航栏：页面菜单栏-->
    <jsp:include page="../part/manager.menu.jsp"></jsp:include>
    <!--表格-->
    <div id="page-wrapper">
        <div id="page-inner">

                <div class="panel panel-default">
                    <div class="panel-heading">西安飞出机型数量及分布地图</div>
                    <div class="panel-body">
                        <div id="quantity-map-echarts" style="width:1600px;height:700px"></div>
                    </div>
                </div>


            <%--<div class="col-md-12 col-sm-12 col-xs-12">--%>
                <%--<div class="panel-default">--%>
                    <%--<div id="quantity-map-echarts" style="width:1000px;height:550px"></div>--%>
                <%--</div>--%>
            <%--</div>--%>

        </div>
    </div>
</div>
<jsp:include page="../part/manager.js.jsp"></jsp:include>
</body>
<script type="text/javascript">


    //地图
    var cnames = new Array();
    var latitudes = new Array();
    var longitudes = new Array();
    var airportAccount = new Array();

    var qmeChart = echarts.init(document.getElementById("quantity-map-echarts"));

    $.post("getAirport", {}, function (data) {

        $.each(data, function () {
            cnames.push(this.cname);
            latitudes.push(this.latitude);
            longitudes.push(this.longitude);
            airportAccount.push(this.account);
        });


        var data1 = new Array();


        for (var i = 0; i < cnames.length; i++) {
            var obj = new Object();
            obj.name = cnames[i];
            obj.value = Number(airportAccount[i]);
            data1.push(obj);
        }



        var geoCoordMap = new Object();
        var tude = new Array();
        for (var i = 0; i < longitudes.length; i++) {
            tude[i] = [longitudes[i], latitudes[i]];
            geoCoordMap[cnames[i]] = tude[i];
        }

        var convertData = function (data1) {
            var res = [];
            for (var i = 0; i < data1.length; i++) {
                var geoCoord = geoCoordMap[data1[i].name];
                if (geoCoord) {
                    res.push({
                        name: data1[i].name,
                        value: geoCoord.concat(data1[i].value)
                    });
                }
            }
            return res;
        };

        var qmeOption = {
            tooltip: {
                trigger: 'item'
            },
            bmap: {
                center: [104.114129, 37.550339],
                zoom: 5,
                roam: true,
                mapStyle: {
                    styleJson: [{
                        'featureType': 'water',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'land',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#f3f3f3'
                        }
                    }, {
                        'featureType': 'railway',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'highway',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#fdfdfd'
                        }
                    }, {
                        'featureType': 'highway',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'arterial',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'arterial',
                        'elementType': 'geometry.fill',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'poi',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'green',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'subway',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'manmade',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'local',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'arterial',
                        'elementType': 'labels',
                        'stylers': {
                            'visibility': 'off'
                        }
                    }, {
                        'featureType': 'boundary',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#fefefe'
                        }
                    }, {
                        'featureType': 'building',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#d1d1d1'
                        }
                    }, {
                        'featureType': 'label',
                        'elementType': 'labels.text.fill',
                        'stylers': {
                            'color': '#999999'
                        }
                    }]
                }
            },
            series: [
                {
                    name: '航班数量',
                    type: 'scatter',
                    coordinateSystem: 'bmap',
                    data: convertData(data1),
                    symbolSize: function (val) {
                        return Math.sqrt(Math.sqrt(val[2]))*2;
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: false
                        },

                    },
                    tooltip: {
                        formatter: function (param) {
                            return param.name + '航班数：' + param.value[2];
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#096B1A',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    zlevel: 1
                },
                {
                    name: '航班数目',
                    type: 'effectScatter',
                    coordinateSystem: 'bmap',
                    data: convertData(data1.sort(function (a, b) {
                        return b.value - a.value;
                    }).slice(1, 6)),
                    symbolSize: function (val) {
                        return Math.sqrt(Math.sqrt(val[2]))*2;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        }
                    },
                    tooltip: {
                        formatter: function (param) {
                            return param.name + '航班数：' + param.value[2];
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'blue',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    zlevel: 1
                },
                {
                    name: '出发地',
                    type: 'effectScatter',
                    coordinateSystem: 'bmap',
                    data: convertData(data1.sort(function (a, b) {
                        return b.value - a.value;
                    }).slice(0, 1)),
                    symbolSize: function (val) {
                        return Math.sqrt(Math.sqrt(val[2]))*2;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        }
                    },
                    tooltip: {
                        formatter: function (param) {
                            return '出发地';
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'red',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    zlevel: 1
                }
            ]

        };
        //使用指定的配置项来设置图表，从而显示图表数据
        qmeChart.setOption(qmeOption);
    });
</script>
</html>
